<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

	<head>
		<link rel="shortcut icon" href="https://www.itsource.cn/img/logo_small.jpg">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>确认订单</title>

		<link type="text/css" rel="stylesheet" href="css/common.css">
		<link type="text/css" rel="stylesheet" href="css/flow.css">
		<!--整站改色 _start-->
		<link type="text/css" rel="stylesheet" href="css/color-style.css">
		<!--整站改色 _end-->
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" src="js/layer.js"></script>
		<link rel="stylesheet" href="css/layer.css" id="layuicss-skinlayercss">
		<script type="text/javascript" src="js/jquery.method.js"></script>

		<script type="text/javascript" src="js/plugins/vue/dist/vue.js"></script>
		<script type="text/javascript" src="js/plugins/axios/dist/axios.js"></script>
		<script type="text/javascript" src="js/axios.common.js"></script>
		<link rel="stylesheet" href="js/jqueryAlert/alert.css">
		<script src="js/jqueryAlert/alert.js"></script>
	</head>

	<body>
	<div id="myBody">
		<div id="bg" class="bg" style="display: none;"></div>
		
		<div class="header-top">
			<div class="header-box">

				<!-- 站点 -->
				<!--站点 start-->
				<div class="SZY-SUBSITE">

				</div>
				<!--站点 end-->
				<font id="login-info" class="login-info SZY-USER-NOT-LOGIN">
					<a class="login color" href="http://user.ymcc.com:6003/login.html" target="_top">请登录</a>
					<a class="register" href="http://user.ymcc.com:6003/register.html" target="_top">免费注册</a>
				</font>
				<font id="login-info" class="login-info SZY-USER-ALREADY-LOGIN" style="display: none;">
					<em>
		<a href="user.html" target="_blank" class="color SZY-USER-NAME"></a>
		<!--欢迎您回来!-->
	</em>
					<a href="site/logout" data-method="post">退出</a>
				</font>

				<ul>
					<li>
						<a class="menu-hd home" href="http://course.ymcc.com:6002/index.html" target="_top">
							<i></i> 源码云课堂首页
						</a>
					</li>
					<li class="menu-item">
						<div class="menu">
							<a class="menu-hd myinfo" href="http://user.ymcc.com:6003/user.home.html" target="_blank">
								<i></i> 会员中心
								<b></b>
							</a>
						</div>
					</li>
					<li class="menu-item cartbox">
						<div class="menu">
							<a class="menu-hd cart" href="cart.html" target="_top">
								<i></i> 购物车
								<span class="SZY-CART-COUNT">0</span>
								<b></b>
							</a>
							<div id="menu-4" class="menu-bd cart-box-main">
								<span class="menu-bd-mask"></span>
								<div class="dropdown-layer">
									<div class="spacer"></div>
									<div class="dropdown-layer-con cartbox-goods-list">

										<!-- 正在加载 -->
										<div class="cart-type">
											<i class="cart-type-icon"></i>
										</div>

									</div>
								</div>
							</div>
						</div>
					</li>

					<li class="menu-item">
						<div class="menu">
							<a class="menu-hd we-chat" href="" target="_top">
								<i></i> 关注源码云课堂
								<b></b>
							</a>
							<div id="menu-5" class="menu-bd we-chat-qrcode">
								<span class="menu-bd-mask"></span>
								<a target="_top">
									<img src="img/test/mall_wx_qrcode_0.jpg" alt="官方微信">
								</a>
								<p class="font-14">关注官方微信</p>
							</div>
						</div>
					</li>

					<li class="menu-item">
						<div class="menu">
							<a href="" class="menu-hd site-nav" target="_blank">
								更多支持
								<b></b>
							</a>
							<div id="menu-7" class="menu-bd site-nav-main">
								<span class="menu-bd-mask"></span>
								<div class="menu-bd-panel">
									<div class="site-nav-con">

										<a href="article/info?id=38" target="_blank" title="新手上路">新手上路</a>

										<a href="article/info?id=38" target="_blank" title="支付方式">支付方式</a>

										<a href="article/list/3.html" target="_blank" title="配送服务">配送服务</a>

										<a href="article/list/4.html" target="_blank" title="售后服务">售后服务</a>

										<a href="article/info?id=38" target="_blank" title="商家合作">商家合作</a>

										<a href="list.html?cat_id=17" target="_blank" title="店铺街">店铺街</a>

									</div>
								</div>
							</div>
						</div>
					</li>

				</ul>
			</div>
		</div>

		
		<script type="text/javascript">
			$(document).ready(function() {
				$(".SZY-SEARCH-BOX-TOP .SZY-SEARCH-BOX-SUBMIT-TOP").click(function() {
					if($(".search-li-top.curr").attr('num') == 0) {
						var keyword_obj = $(this).parents(".SZY-SEARCH-BOX-TOP").find(".SZY-SEARCH-BOX-KEYWORD");

						var keywords = $(keyword_obj).val();
						if($.trim(keywords).length == 0 || $.trim(keywords) == "请输入关键词") {
							keywords = $(keyword_obj).data("searchwords");
						}
						$(keyword_obj).val(keywords);
					}
					$(this).parents(".SZY-SEARCH-BOX-TOP").find(".SZY-SEARCH-BOX-FORM").submit();
				});
			});
		</script>
		<!-- 引入上方导航条文件 -->
		<div class="header">
			<div class="w990">
				<div class="logo-info">
					<a href="#" class="logo">
						<img src="./img/test/mall_logo_0.png">
					</a>
				</div>
				<div class="cart-progress">
					<ul>

						<li class="finish finish-01">
							<i>1</i>
							<span>
						<a href="#checkout.html">购买课程</a>
					</span>
							<b></b>
						</li>
						<li class="finish finish-02">
							<i>2</i>
							<span>确认订单</span>
							<b></b>
						</li>
						<li class="finish">
							<i>3</i>
							<span>付款</span>
							<b></b>
						</li>
						<li class="finish">
							<i>4</i>
							<span>支付成功</span>
							<b></b>
						</li>

					</ul>
				</div>
			</div>
		</div>

		<div class="content-bg">
			<div class="content-main w990">
				<div class="content-info">
					<!-- 所有店铺商品清单 -->
					<div class="goods-list border-line">
						<div class="main-content">
							<h2 class="title">商品清单</h2>
							<div class="order-goods">
								<!-- 根据店铺对商品进行拆单 每个table是一个店铺的商品 _star-->
								<table cellpadding="0" cellspacing="0" border="0" width="100%" class="order-goods-list">
									<tbody>
										<tr>
											<th class="goods-title">
												<div class="order-body">
													<div class="shop">
														<div class="shop-info">
															<span class="shop-icon">
										<img src="./img/test/shop-icon2.png">
									</span>
															<span class="shop-name">平台：</span>
															<a href="#shop/7.html" target="_blank" title="">源码云课堂</a>
															<span class="shop-customer">
										<!-- 客服 -->

										<a href="javascript:;" class="ww-light service-online" data-shop_id="7"><img src="./img/test/openim.png" width="20" height="20" border="0" alt="在线客服"></a>

									</span>
														</div>
													</div>
												</div>
											</th>
											<th class="goods-price">价格</th>
											<th class="goods-amount">时长(分钟)</th>
											<th class="goods-sum">观看截止</th>
											<th class="goods-postage">配送方式</th>
										</tr>
										<tr>
											<td colspan="4" class="goods-content">
												<table cellpadding="0" cellspacing="0" border="0" width="100%">
													<!-- 如果该商品有赠品，那么当前商品的tr的class="have-gift" _star-->
													<tbody>
														<tr class="goods_34 " v-for="courseDto in courses">
															<td class="goods-img">
																<a href="#254" title="" target="_blank" class="img">
																	<img :src="courseDto.course.pic" width="50" height="50">
																</a>

															</td>
															<td class="goods-master">
																<p class="item-title">
																	<a href="#254.html" target="_blank"
																	   :title="courseDto.course.name">

																		{{courseDto.course.name}}
																	</a>
																</p>
																<div class="item-other-info">
																	<div class="promo-logos"></div>
																	<div class="item-icon-list">
																		<div class="item-icons">

																		</div>
																	</div>
																</div>
															</td>
															<td class="goods-attr">
																<p class="sku-line">{{courseDto.course.gradeName}}</p>
															</td>
															<td style="width: 140px" cl优惠ass="goods-price second-color">￥{{courseDto.courseMarket.price}}元
																<span style="text-decoration: line-through;font-size: 12px;color: #999999">{{courseDto.courseMarket.priceOld}}元</span>
															</td>
															<td class="goods-amount">{{courseDto.course.totalMinute}}</td>
															<td class="goods-sum">
																<p class="sum second-color">{{courseDto.course.watchExpireTime}}</p>
															</td>
														</tr>
														<!-- 如果该商品有赠品，那么当前商品的tr的class="have-gift" _end-->
													</tbody>
												</table>
											</td>
											<td class="goods-postage">
												<div class="postage">
													<label>
														<input type="radio" name="" value="" checked="checked">
														<span>普通配送</span>
													</label>
													<select class="shipping-select" data-shop-id="7">
														<option value="0" selected="">在线发货</option>
													</select>
												</div>
											</td>
										</tr>
										<tr>
											<td colspan="2" class="goods-annex">
											</td>
											<td colspan="3" class="goods-bill" id="shop_count_7">
												<div class="bill">
													<div class="order-pay">
														合计
														<span>(无其他费用)</span> ：
														<strong class="second-color SZY-SHOP-ORDER-AMOUNT-7" data-shop-id="7">￥{{totalAmount}} 元 | 优惠 0 元</strong>
													</div>
												</div>
											</td>
										</tr>
									</tbody>
								</table>
								<!-- 根据店铺对商品进行拆单 每个table是一个店铺的商品 _end-->

							</div>
						</div>
					</div>
					<!-- 平台红包 -->
					<!-- 
<div class="real-pay">
	<span class="hd">应付总额：</span>
	<span class="bd color SZY-ORDER-AMOUNT"></span>
</div>
 -->
					<!-- <div class="obtain-point">
	可获得积分：
	<span>
		<strong></strong>
		点
	</span>
</div> -->

					<!-- 发票信息 -->

					<!-- 支付方式 -->
					<div class="pay-type border-line">
						<div class="main-content">
							<h2 class="title">支付方式</h2>
							<div class="pay-type-content">
								<!-- 积分支付 start -->

								<!-- 积分支付 end -->

								<!-- 余额支付 start -->

								<!-- 余额支付后面显示的应付款信息 -->
								<p class="surplus-pay" id="balance_money_pay">
									剩余应付金额
									<strong class="second-color SZY-ORDER-MONEY-PAY">￥{{totalAmount}} 元</strong> 请选择以下支付方式支付
								</p>

								<!-- 银行支付方式调用 start -->
								<div class="pay-all" id="pay_bank">

									<ul id="paylist" class="payment-tab">

										<!-- 货到付款特殊处理 -->

										<!-- 货到付款特殊处理 -->
										<li class="clearfix">
											<label>
			<input v-model="orderForm.payType" type="radio" id="pac_code_1" name="pay_code" class="pay_code" value="1">
			<span class="payment-name">支付宝</span>
		</label>
										</li>

										<!-- 货到付款特殊处理 -->
										<li class="clearfix">
											<label>
			<input  v-model="orderForm.payType" type="radio" id="pac_code_2" name="pay_code" class="pay_code" value="2">
			<span class="payment-name">银联支付</span>
		</label>
										</li>

										<!-- 货到付款特殊处理 -->
										<li class="clearfix">
											<label>
			<input  v-model="orderForm.payType" type="radio" id="pac_code_3" name="pay_code" class="pay_code" value="3">
			<span class="payment-name">微信支付</span>
		</label>
										</li>

									</ul>

								</div>
								<!-- 银行支付方式调用 end -->
							</div>
						</div>
					</div>
					<!-- 提交订单 -->
					<div class="confirm-pay bottom" id="checkout_amount">

						<div class="total-count">
							<div class="total-count-pay">
								<div class="total-count-pay-info">
									<span class="first">
				订单总额：
				<span class="SZY-ORDER-AMOUNT ">￥{{totalAmount}} 元</span>
									</span>
								</div>
								<div class="total-count-pay-info">
									<span>
				课程总额：
				<span class="SZY-GOODS-AMOUNT">￥{{totalAmount}} 元</span>
									</span>
									<em>-</em>
				优惠：
				<span class="">￥0</span>
									</span>
									<em>-</em>
									<span>
				余额：
				<span class="SZY-ORDER-BALANCE">￥0.00</span>
									</span>
									<em>=</em>
									<span class="end second-color">
				应付款：
				<span class="SZY-ORDER-MONEY-PAY">￥{{totalAmount}}</span>
									</span>
								</div>
							</div>
						</div>
						<div class="submit-box fr">
							<!--<div class="price-box fl">
		<span>应付总额：</span>
		<span class="price color SZY-ORDER-AMOUNT">￥112.39</span>
	</div>-->

							<div class="fr">
								<a href="javascript:void(0);"   id="submitBtn"
								   @click="submitOrder" class="submit-btn gopay bg-color">提交订单</a>
							</div>
						</div>

					</div>
				</div>

				<!-- 新增地址弹框 -->
				<div class="bomb-box addr-box">
					<div class="box-title">使用新地址</div>
					<div class="box-oprate addr-box-oprate"></div>
					<div class="content-info" id="edit-address-div"></div>
				</div>

				<!-- 发票信息弹框 -->
				<div class="bomb-box invoice-box">
					<div class="box-title">发票信息</div>
					<div class="box-oprate invoice-box-oprate"></div>
					<div class="content-info">
						<div class="tab-nav">
							<ul>

								<li class="tab-nav-item  tab-item-selected" data-invoice-type="0" data-invoice-name="不开发票">
									不开发票
									<b></b>
								</li>

								<li class="tab-nav-item disabled " data-invoice-type="1" data-invoice-name="普通发票">
									普通发票
									<b></b>
								</li>

								<li class="tab-nav-item disabled " data-invoice-type="2" data-invoice-name="增值税发票">
									增值税发票
									<b></b>
								</li>

							</ul>
						</div>
						<!-- 普通税发票 _star -->

						<form id="invoice_type_0" action="#checkout.html" method="post" class="form-horizontal">
							<div class="act">
								<input type="button" value="保存发票信息" id="inv_submit">
								<input type="button" value="取消" class="m-l-10" id="inv_cancle">
							</div>
						</form>
						<!-- 增值税发票 _end -->

						<!-- 增值税发票 _end -->

						<!-- 增值税发票 _end -->
					</div>
				</div>
			</div>
		</div>

		<!-- 付款信息弹框 -->
		<div class="bomb-box payment-box">
			<div class="box-title">请付款</div>
			<div class="content-info">
				<p class="warning">
					<i></i>
					<span>请您在新打开的页面上完成付款。</span>
				</p>
				<p class="prompt">付款完成前请不要关闭此窗口</p>
				<p class="prompt">完成付款后请根据您的情况点击下面的按钮</p>
				<p class="btns">
					<a href="#checkout/result.html" class="pay_result" >已完成付款</a>
					<a href="#checkout/result.html" class="m-l-10 pay_result">付款遇到问题</a>
				</p>
				<!-- <p class="back">
				<a href="/user/result/pay.html" title="返回选择其他的支付方式" class="color">&gt;&gt; 返回选择其他的支付方式</a>
			</p> -->
			</div>
		</div>

		<!-- 引入底部文件 -->

		<!-- 底部 _start-->

		<div class="site-footer">

			<div class="footer-related">

				<div class="footer-info">
					<div class="info-text">
						<!-- 底部导航 -->
						<p class="nav-bottom">

						</p>
						<p>
							Copyright 源码时代(www.itsource.cn) 版权所有
							<a href="http://www.miibeian.gov.cn/" target="_blank">蜀ICP备88888888号</a>
						</p>
					</div>

				</div>

			</div>
		</div>
		<div id="payHtml"></div>
	</div>
		<script type="text/javascript" src="js/checkout.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/szy.cart.js"></script>
		<script type="text/javascript" src="js/jquery.region.js"></script>
		<!-- 表单验证 -->
		<script type="text/javascript" src="js/jquery.validate.js"></script>
		<script type="text/javascript" src="js/jquery.validate.custom.js"></script>
		<script type="text/javascript" src="js/messages_zh.js"></script>



		<script type="application/javascript">
			new Vue({
				el:"#myBody",
				data(){
					return {
						courses:[],
						totalAmount:0,
						orderNo:"",
						orderForm:{
							courseIds:[],
							payType:"1",
							type:0,	//0代表普通订单，1代表秒杀订单
							token:"",
						}
					}
				},
				methods:{
					//下单方法
					submitOrder(){
						var _this = this;

						if(_this.orderForm.courseIds){
							$("#submitBtn").attr("disabled",true);
							$("#submitBtn").html("正在下单...");
							let URI = "placeOrder";
							let param = {};

							//秒杀下单
							if(_this.orderNo && _this.orderForm.type && _this.orderForm.type == 1){
								//秒杀请求
								URI = "killPlaceOrder";
								param = {
									payType:_this.orderForm.payType,
									orderNo:_this.orderNo
								}
							}else{
								param = _this.orderForm;
							}

							//公共参数
							param["token"] = _this.orderForm.token;

							//普通请求
							_this.$http.post("/order/courseOrder/"+URI,param).then(res=>{
								if(res.data.success){
									_this.toPay(res.data.data);

									//是否从购物车跳转过来,删除购物车
									let fromPage = api.getQueryVariable("from");
									if(fromPage == 'cart'){
										_this.$http.post("/cart/courseCart/remove/",_this.orderForm.courseIds).then(res=>{
										})
									}
								}else{
									$.alert(res.data.message);
									$("#submitBtn").attr("disabled",false);
									$("#submitBtn").html("提交订单");
								}
							}).catch(error => {
								$.alert("下单失败["+error.message+"]");
								$("#submitBtn").attr("disabled",false);
								$("#submitBtn").html("提交订单");
							})
						}

					},
					toPay(orderNo){
						var _this = this;
						window.setTimeout(function () {
							if(orderNo){
								var param = {
									orderNo:orderNo,
									payType: _this.orderForm.payType,
									callUrl : "http://course.ymcc.com:6002/detail.html?courseId="+_this.orderForm.courseIds[0]
								};
								_this.$http.post("/pay/pay/apply",param).then(res=>{
									if(res.data.success){
										document.write(res.data.data);
									}else{
										$.alert(res.data.message);
										$("#submitBtn").attr("disabled",false);
										$("#submitBtn").html("提交订单");
									}
								}).catch(error => {
									$.alert("支付申请失败["+error.message+"]");
									$("#submitBtn").attr("disabled",false);
									$("#submitBtn").html("提交订单");
								})
							}
						},2000);

					},
					getCourse(){
						if(this.orderForm.courseIds){
							//发送请求到后台获取数据
							this.$http.get("course/course/info/"+this.orderForm.courseIds).then(res=>{
								let {success ,data,message} = res.data;
								if(success){
									this.courses = data.courseInfos;
									this.totalAmount = data.totalAmount;
								}else{
									$.alert("订单数据加载失败["+message+"]");
								}

							}).catch(error => {
								$.alert("订单数据加载失败["+error.message+"]");
							})
						}
					},
					getToken(){
						this.$http.get("order/courseOrder/createTokenForOrder").then(res=>{
							let {data,success,message} = res.data;
							if(success){
								this.orderForm.token = data;
							}else{
								$.alert("服务器异常[防重Token获取失败]");
							}
						}).catch(error => {
							$.alert("服务器异常[防重Token获取失败]");
						})
					}
				},
				mounted(){

					//处理课程ID
					let courseId = api.getQueryVariable("courseId");
					if(!courseId){
						$.alert("非法请求，请重新购买");
						window.location.href="/index.html";
					}
					//多课程下单
					if(courseId.indexOf(",")){
						let courseIds = courseId.split(",");
						for (let i = 0 ;  courseIds.length > i ; i++){
							this.orderForm.courseIds.push(courseIds[i]) ;
						}
					}else{
						this.orderForm.courseIds.push(courseId) ;
					}
					//处理type，秒杀是1
					let type = api.getQueryVariable("type");
					//订单号，秒杀才有订单号
					let orderNo = api.getQueryVariable("orderNo");
					if(type && orderNo){
						this.orderForm.type = parseInt(type);
						this.orderNo = orderNo;
					}

					//加载初始化数据
					this.getCourse();
					this.getToken();
					//this.getAddress();
				}
			});


		</script>
	</body>

</html>